<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>02.custom-component-extend</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app"></div>

        <script type="text/javascript">
            // TODO:利用extend定义组件，确认data为什么必须是函数类型
            const MyComponent = Vue.extend({
                data() {
                    return {
                        title:'the VueJs Instance'
                    };
                },
                template:`
                <div>
                    <h1>{{ title }}</h1>
                    <button @click="title = 'changed'">修改标题</button>
                </div>
                `
            });

            Vue.component('MyComponent',MyComponent);
            

            let vm = new Vue({
                el: '#app',
            });
        </script>
    </body>
</html>
